<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 先获取A,再获取B,再获取C -->
  <h1>async与await练习</h1>
  <button id="btn">点击请求数据</button>
  <script>
    const obtn = document.getElementById('btn')

    obtn.onclick = async function () {
      const name = await new Promise((resolve, reject) => {
        try {
          console.log('开始获取A')
          setTimeout(() => {
            console.log('A数据获取成功')
            const name = {
              name: '程龙'
            }
            resolve(name)
          }, 2000);
        } catch (e) {
          reject(e.message)
        }
      })

      const age = await new Promise((resolve, reject) => {
        try {
          console.log('开始获取B')
          setTimeout(() => {
            console.log('B数据获取成功')
            const age = {
              age: 12
            }
            resolve(age)
          }, 2000);
        } catch (e) {
          reject(e.message)
        }
      })

      const sex = await new Promise((resolve, reject) => {
        try {
          console.log('开始获取C')
          setTimeout(() => {
            console.log('C数据获取成功')
            const sex = {
              sex: '男'
            }
            resolve(sex)
          }, 2000);
        } catch (e) {
          reject(e.message)
        }
      })

      console.log({
        ...name,
        ...age,
        ...sex
      });
    }
  </script>
</body>

</html>